<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡牌</title>
 <style>
   *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins' , sans-serif;
   }
   body{
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     background-color: #0f0f0f;
     overflow: hidden;
   }
   .container{
     position: relative;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;

   }
   .container .card{
     position: absolute;
     width: 240px;
     height: 360px;
     background-color: #5e5cfc;
     border-radius: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: rgba(0,0,0,0);
     font-size: 8em;
     font-weight: 700;
     border: 10px solid rgba(0,0,0,.1);
     transition: .5s;
     transform-origin: 50% 100%;
     filter: hue-rotate(calc(var(--i) * 60deg));
   }
   .container:hover .card{
     transform: rotate(calc(var(--i) * 5deg))
                translate(calc(var(--i) * 120px), -50px);
     box-shadow: 0 15px 50px rgba(0,0,0,.25);
     color: rgba(0,0,0,.25);
   }
   .container:active .card:not(:active){
      background-color: #333333;
   }
   .container .card:active{
     translate:calc(var(--i) * 20px) -50px;
     z-index: 999;
   }
 </style>
</head>
<body>
  <div class="container">
    <div class="card" style="--i:-4">1</div>
    <div class="card" style="--i:-3">2</div>
    <div class="card" style="--i:-2">3</div>
    <div class="card" style="--i:-1">4</div>
    <div class="card" style="--i:0">5</div>
    <div class="card" style="--i:1">6</div>
    <div class="card" style="--i:2">7</div>
    <div class="card" style="--i:3">8</div>
    <div class="card" style="--i:4">9</div>
  </div>
</body>
</html>
